import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Patient.css";
import type { PaginationProps } from 'antd';

import { Pagination, Input, Button, DatePicker, Space } from 'antd';

import { Link } from "react-router-dom"
interface Props {
    _id: string,
    Card: string;
    Name: string;
    Type: string;
    Numbers: string;
    Names: string;
    Status: string;
    Time: string;
}
const hangpage: PaginationProps['onChange'] = (pageNumber) => {
    console.log('Page: ', pageNumber);
};
const { RangePicker } = DatePicker;
const Doctor: React.FC<Props> = () => {
    // 医技报告查询表
    const [user, setuser] = useState<Props[]>([]);
    const [pages, setpages] = useState(1)
    const [num, setnum] = useState(1)
    const [numpage, setnumpage] = useState(1)
    const limit = 5  //每页条数
    //  就诊卡号搜索
    const [cardindex, setcardindex] = useState("")
    // 患者姓名的搜索
    const [names, setnames] = useState("")
    // 申请单号的搜索
    const [nums, setnums] = useState("")
    // 申请单搜索
    const [shen, setshen] = useState("")
    // 状态的搜索
    const [status, setstatus] = useState("")
    // 时间
    const [dates, setDates] = useState([null, null]);

    // 渲染
    const classlist = (page: number) => {
        axios.get(`http://127.0.0.1:3000/cws/index_style/?page=${page}&limit=${limit}&index=${cardindex}&names=${names}&nums=${nums}&shen=${shen}&status=${status}`).then((response) => {
            const { code, data, num, numpage } = response.data;
            if (code == 200) {
                setuser(data);
                setnum(num)
                setnumpage(numpage)
            }
        });
    };

    // 挂载数据
    useEffect(() => {
        classlist(pages);
    }, [pages]);

    const hangpage = (page: number) => {
        setpages(page)
    }

    const onChange = (dates) => {
        setDates(dates);
    };

    // 搜索
    const search = () => {
        classlist(pages)
    }
    return (
        <div>
            <br></br>
            <br></br>
            <div style={{ width: '100%', height: "100%" }}>
                <div style={{
                    width: "1100px",
                    height: "200px",
                    margin: "0 auto"
                }}>
                    <span>就诊卡号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setcardindex(event.target.value)
                    }} />

                    <span style={{ marginLeft: "70px" }}>患者姓名:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setnames(event.target.value)
                    }} />
                    <span style={{ marginLeft: "60px" }} >申请卡号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setnums(event.target.value)
                    }} />
                    <br></br>
                    <br></br>
                    <span >申请单名称:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setshen(event.target.value)
                    }} />
                    <div style={{ marginLeft: "390px", marginTop: "-29px" }} >
                        <span>申请时间:</span>&nbsp;
                        <Space direction="vertical" size={12}>
                            <RangePicker
                                value={dates}
                                onChange={onChange}
                                style={{ width: "250px" }}
                                format="YYYY-MM-DD HH:mm"
                                placeholder={['开始时间', '结束时间']}
                            />
                        </Space>
                        <span style={{ marginLeft: "95px" }}>状态:</span>&nbsp;
                        <select onChange={(event) => {
                            setstatus(event.target.value)
                        }}>
                            <option value="">全部状态</option>
                            <option value="true">未报告</option>
                            <option value="false">已报告</option>
                        </select>
                    </div>
                    <div style={{ width: "300px", height: "50px", marginLeft: "1000px", marginTop: "10px" }}>
                        <Button>重置</Button>
                        <Button type="primary" style={{ marginLeft: "20px" }} onClick={() => {
                            search()
                        }}>搜索</Button>
                    </div>
                </div>
            </div>
            <div className="head">
                <table cellSpacing={0} className="head_table">
                    <tr style={{ backgroundColor: "rgb(242, 242, 242)" }}>
                        <td>就诊卡号</td>
                        <td>患者姓名</td>
                        <td>申请单类型</td>
                        <td>申请单号</td>
                        <td>申请单名称</td>
                        <td>状态</td>
                        <td>申请时间</td>
                        <td>操作</td>
                    </tr>
                    {user.map((item, index) => {
                        return (
                            <tr key={index}>
                                <td>{item.Card}</td>
                                <td>{item.Name}</td>
                                <td>{item.Type == "false" ? "体验" : "检查"}</td>
                                <td>{item.Numbers}</td>
                                <td>{item.Names}</td>
                                <td>{item.Status == "false" ? "已报告" : "未报告"}</td>
                                <td>{item.Time}</td>
                                <td>
                                    <Link to={`/prints/${item._id}`}>查看报告</Link>
                                </td>
                            </tr>
                        );
                    })}
                </table>
            </div>
            <div className="page">
                <div style={{
                    width: "500px", marginLeft: "900px", height: "100px"
                }}>
                    <span style={{ float: "left", lineHeight: "30px", "color": "blue" }}>共有{num}数据</span>
                    <Pagination showQuickJumper defaultCurrent={numpage} total={num} pageSize={limit} onChange={hangpage} />
                </div>
            </div>
        </div>
    );
};

export default Doctor;
